<template>
	<div class="Product" @click="ShowStu">
		<div class="ProductNav">
			<div class="ProductNav-Left">
				<div class="ProductNav-Num">
					<span>4.5100%</span>
				</div>
				<div class="ProductNav-Tips">
					<span>七日年化</span>
				</div>
			</div>
			<div class="ProductNav-Right">
				<div class="ProductNav-Num">
					<span>30天</span>
				</div>
				<div class="ProductNav-Tips">
					<span>产品期限</span>
				</div>
			</div>
		</div>

		<!--画图先-->
		<!--<div class="Product-Drawing">
			<div class="Drawing-Nav">
				<div class="Drawing-Title">
					<span>七日年化收益率</span>
				</div>
				<div class="Drawing-Tips">
					<span>万份收益:1.2345元</span>
				</div>
			</div>

			<div class="Drawing-Canvs">
				<div id="myChart" :style="{width:100 + '%', height: '100%'}"></div>
			</div>
			<div class="Drawing-Tabs">
				<div class="Drawing-TabsLi" :class="{TabsLiActive:TabItem==0}" @click="TabsItem(0)">
					<span>近七日</span>	
				</div>
				<div class="Drawing-TabsLi" :class="{TabsLiActive:TabItem==1}" @click="TabsItem(1)">
					<span>近一月</span>
				</div>
				<div class="Drawing-TabsLi" :class="{TabsLiActive:TabItem==2}" @click="TabsItem(2)">
					<span>近三月</span>
				</div>
			</div>
		</div>-->
		<div class="Bright">
			<div class="BrightTitle">
				<span>产品亮点</span>
			</div>
			<div class="BrightBody">
				<div class="BrightBody-Item">
					<div class="rightBody-ItemLeft">
						<div class="ItemLeft-Icon">
							
						</div>
					</div>
					<div class="rightBody-ItemRight">
						<div class="rightBody-Title">
							<span>国内首家专业养老金管理机构</span>
						</div>
						<div class="rightBody-Cont">
							<span>国务院批准试点的国内首家养老金管理机构，建设银行持股85%，全国社保基金持股15%</span>
						</div>
					</div>
				</div>
				
				<div class="BrightBody-Item">
					<div class="rightBody-ItemLeft">
						<div class="ItemLeft-Icon">
							
						</div>
					</div>
					<div class="rightBody-ItemRight">
						<div class="rightBody-Title">
							<span>国内首家专业养老金管理机构</span>
						</div>
						<div class="rightBody-Cont">
							<span>国务院批准试点的国内首家养老金管理机构，建设银行持股85%，全国社保基金持股15%</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		
		
		
		<div class="Bright">
			<div class="BrightTitle">
				<span>常见问题</span>
			</div>
			<div class="BrightBody">
				<div class="BrightBody-Item">
					<div class="rightBody-ItemLeft">
						<div class="ItemLeft-Icon">
							
						</div>
					</div>
					<div class="rightBody-ItemRight">
						<div class="rightBody-Title">
							<span>如何更改到期方式?</span>
						</div>
						<div class="rightBody-Cont">
							<span>更改到期方式的回答。更改到期方式的回答。更改到期方式的回答。更改到期方式的回答。更改到期方式的回答。更改到期方式的回答...</span>
						</div>
					</div>
				</div>
				
				<div class="BrightBody-Item">
					<div class="rightBody-ItemLeft">
						<div class="ItemLeft-Icon">
							
						</div>
					</div>
					<div class="rightBody-ItemRight">
						<div class="rightBody-Title">
							<span>为什么买入后没有收益?</span>
						</div>
						<div class="rightBody-Cont">
							<span>为什么买入后没有收益的回答。为什么买入后没有收益的回答。为什么买入后没有收益的回答。为什么买入后没有收益的回答。为什么买入后没有收益的回答...</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--买入-->
		<div class="PayBtn">
			<button class="PayButton">立即买入</button>
		</div>
	</div>
</template>

<script>
	var OptionTb
	export default {
		name: 'Product',
		data() {
			return {
				myChart:'',
				TabItem:1,
				/*Xdata: ['06-13', '06-14', '06-15', '06-16', '06-17', '06-18', '06-19', '06-20', '06-21', '06-22', '06-23', '06-24', '06-25', '06-27', '06-28', '06-29', '06-30', '07-01', '07-02', '07-03', '07-04', '07-05', '07-06', '07-07', '07-08', '07-09', '07-10', '07-11', '07-12', '07-13'],
				Ydata:['4.20', '4.30', '4.10', '5.20', '5.20', '4.90', '5.00', '4.80', '4.70', '5.00', '4.75', '4.76', '4.45', '4.80', '4.30', '4.90', '4.44', '4.80', '5.00', '5.12', '5.20', '5.30', '5.33', '5.44', '5.00', '4.80', '4.66', '5.00', '4.88', '5.30']*/
			}
		},
		created: function() {
			var myDate = new Date();
			this.pickerValue = myDate
			//更改Title
			document.title = this.$route.params.id;
		},
		mounted() {
			//创建图表,要修改数据的话则要再之前修改
//			this.drawLine();

		},
		methods: {
			ShowStu(){
//				this.myChart.dispatchAction({
//				    type: 'hideTip'
//				})
//				this.drawLine();
			},
			/*
			TabsItem(e){
				if(e == 0)
				{
					this.Xdata = ['06-13', '06-14', '06-15', '06-16', '06-17', '06-18', '06-19'];
					this.Ydata = ['4.20', '4.30', '4.10', '5.20', '5.20', '4.90', '5.00'];
					this.drawLine();
				}
				else if(e == 1 )
				{
					this.Xdata =  ['06-13', '06-14', '06-15', '06-16', '06-17', '06-18', '06-19', '06-20', '06-21', '06-22', '06-23', '06-24', '06-25', '06-27', '06-28', '06-29', '06-30', '07-01', '07-02', '07-03', '07-04', '07-05', '07-06', '07-07', '07-08', '07-09', '07-10', '07-11', '07-12', '07-13'];
					this.Ydata = ['4.20', '4.30', '4.10', '5.20', '5.20', '4.90', '5.00', '4.80', '4.70', '5.00', '4.75', '4.76', '4.45', '4.80', '4.30', '4.90', '4.44', '4.80', '5.00', '5.12', '5.20', '5.30', '5.33', '5.44', '5.00', '4.80', '4.66', '5.00', '4.88', '5.30'];
					this.drawLine();
				}
				else if(e == 2 )
				{
					this.Xdata =  ['06-13', '06-14', '06-15', '06-16', '06-17', '06-18', '06-19', '06-20', '06-21', '06-22', '06-23', '06-24', '06-25', '06-27', '06-28', '06-29', '06-30', '07-01', '07-02', '07-03', '07-04', '07-05', '07-06', '07-07', '07-08', '07-09', '07-10', '07-11', '07-12', '07-13','06-13', '06-14', '06-15', '06-16', '06-17', '06-18', '06-19', '06-20', '06-21', '06-22', '06-23', '06-24', '06-25', '06-27', '06-28', '06-29', '06-30', '07-01', '07-02', '07-03', '07-04', '07-05', '07-06', '07-07', '07-08', '07-09', '07-10', '07-11', '07-12', '07-13','06-13', '06-14', '06-15', '06-16', '06-17', '06-18', '06-19', '06-20', '06-21', '06-22', '06-23', '06-24', '06-25', '06-27', '06-28', '06-29', '06-30', '07-01', '07-02', '07-03', '07-04', '07-05', '07-06', '07-07', '07-08', '07-09', '07-10', '07-11', '07-12', '07-13'];
					this.Ydata = ['4.20', '4.30', '4.10', '5.20', '5.20', '4.90', '5.00', '4.80', '4.70', '5.00', '4.75', '4.76', '4.45', '4.80', '4.30', '4.90', '4.44', '4.80', '5.00', '5.12', '5.20', '5.30', '5.33', '5.44', '5.00', '4.80', '4.66', '5.00', '4.88', '5.30','4.20', '4.30', '4.10', '5.20', '5.20', '4.90', '5.00', '4.80', '4.70', '5.00', '4.75', '4.76', '4.45', '4.80', '4.30', '4.90', '4.44', '4.80', '5.00', '5.12', '5.20', '5.30', '5.33', '5.44', '5.00', '4.80', '4.66', '5.00', '4.88', '5.30','4.20', '4.30', '4.10', '5.20', '5.20', '4.90', '5.00', '4.80', '4.70', '5.00', '4.75', '4.76', '4.45', '4.80', '4.30', '4.90', '4.44', '4.80', '5.00', '5.12', '5.20', '5.30', '5.33', '5.44', '5.00', '4.80', '4.66', '5.00', '4.88', '5.30'];
					this.drawLine();
				}
				this.TabItem = e
			},*/
			/*
			drawLine() {
				this.xfSte = true;
				this.xfOp = 1
				// 基于准备好的dom，初始化echarts实例
				this.myChart = this.$echarts.init(document.getElementById('myChart'))
				// 绘制图表
				this.myChart.setOption({
					xAxis: {
						type: 'category',
						data: this.Xdata, //图例X轴数据
						axisLine: {
							lineStyle: {
								color: '#C5C5C5',
								width: 1, //这里是为了突出显示加上的
							},

						},
						axisLabel: {
							inside: false,
							showMaxLabel:true,
							interval:10,
						},
						axisTick: {
							length: 0,
							alignWithLabel:true,
							interval: 10,
						},
					},
					yAxis: {
						type: 'value',
						min:'4.0',
						max:'6.0',
						splitNumber:5,
						axisLine: {
							lineStyle: {
								color: '#C5C5C5',
								width: 1, //这里是为了突出显示加上的
							},
						},
						axisTick: {
							length: 0
						},
						splitLine:{
							show: false
						},
					},
					tooltip: {
						trigger: 'axis',
						showContent:false,
						hideDelay:0,
						axisPointer:{
							type:'line',
							axis:'auto',
							snap:true,
							lineStyle:{
								opacity:1,
								color:'#F9A01F',
							},
							
						},
						label: {
							show:false
						},
						confine:true,
						alwaysShowContent:false,
						showContent:true
					},
					series: [{
						show:false,
						data:this.Ydata, //图例Y轴数据
						type: 'line',
						smooth: true,
						symbol: 'none',
						
						itemStyle: {
							show:false,
							normal: {
								show:false,
								color: '#F9A01F',
								lineStyle: {
									color: '#F9A01F'
								}
							}
						},
						 markPoint: {
			            },
					}],
					grid: {
						top: 10, //图例距离父标签顶部
						bottom: 30, //图例距离父标签底部
						right: 40,
					}});
			},*/
		}

	}
</script>

<style scoped>
	@import url("css/Product.css");

</style>